<template>
  <div class="departments-container">
    <div class="app-container">
      <el-card class="tree-card">
        <!-- 绘制头部区域 -->
        <tree-tools :tree-data="company" :is-root="true" />
        <!-- 树组件区域 -->
        <!-- data属性是树组件的数据 -->
        <!-- props是展示组件规则属性：值是一个对象 -->
        <!-- label:'文字显示的字段默认为label',children:'子级存在的字段，默认为children' -->
        <el-tree :data="data" :props="{ label: 'name', children: 'child' }">
          <!-- 再次复用头部组件 -->
          <tree-tools slot-scope="{ data }" :tree-data="data" />
        </el-tree>
      </el-card>
    </div>
  </div>
</template>

<script>
import TreeTools from './components/tree-tools.vue'
export default {
  name: 'Departments',
  components: {
    TreeTools
  },
  data() {
    return {
      company: { name: '传智教育', manager: '负责人' },
      // 1.定义变量，存储变量
      data: []
    }
  },
  methods: {
    // 2.获取数据
    async initData() {
      let res = await getDepartmentListApi()
    }
  }
}
</script>

<style scoped lang="less"></style>
